<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/h-ui/css/H-ui.min.css"/>
	<link rel="stylesheet" href="static/h-ui.admin/css/H-ui.admin.css"/>
	<link rel="stylesheet" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" href="static/h-ui.admin/skin/green/skin.css" id="skin" />
	<link rel="stylesheet" href="static/h-ui.admin/css/style.css" />
	<!-- page specific plugin styles -->

	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
	<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
	<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script>
	<!--/_footer 作为公共模版分离出去-->
    
    <!--jqgrid表格组件start-->
	<link rel="stylesheet" href="lib/jquery-ui-1.12.1/jquery-ui.css" />
	<link rel="stylesheet" href="lib/jqGrid5.2.0/css/ui.jqgrid.css" />
    <script type="text/javascript" src="lib/jqGrid5.2.0/jquery-ui-custom.min.js"></script>
    <script type="text/javascript" src="lib/jqGrid5.2.0/js/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript" src="lib/jqGrid5.2.0/js/jquery.jqGrid.js"></script>
	
	<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
	<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>
    <!--表格组件end-->
	<script type="text/javascript" src="lib/stone-framework.js"></script>
</head>
<body>
<div class="page-container">
	<p class="f-20 text-success">欢迎使用 <span class="f-30">翼虎客户销售管理信息系统 </span> <span class="f-15">v1.0</span></p>
	<p>登录次数：${user.loginCount} </p>
	<p>上次登录IP：${user.lastAddress} 上次登录时间：${user.lastLogin}</p>
	<table class="table table-border table-bordered table-bg">
		<tbody>
			<tr class="text-c">
				<td colspan="2">
					<div id="container3" style="min-width:700px;height:400px"></div>
				</td>
			</tr>
			<tr class="text-c">
				<td style="width:350px;">
					<div id="container" style="width:350px;height:250px"></div>
				</td>
				<td>
					<div id="container1" style="width:100%;height:250px"></div>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<script type="text/javascript">
$(function(){
	$.ajax({
		type: "POST",
		url: '<%=basePath%>/busReport/listAll.do?tm='+new Date().getTime(),
    	data: encodeURI(""),
		dataType:'json',
		cache: false,
		success: function(data){
			if(data.result=="0"){
				var rows=data.rows;
				if(rows.length>0){
					var level=[
							['潜在',rows[0].customerLevel1],
							['普通',rows[0].customerLevel2],
							['重点',rows[0].customerLevel3],
						]
					customerLevel('container','客户级别',level);
					var risk=[
							['保守',rows[0].customerRisk1],
							['成长',rows[0].customerRisk2],
							['进取',rows[0].customerRisk3],
						]
					customerLevel('container1','风险偏好',risk);
				}
				
				var reportDate=[];
				var saleVolume=[];
				var customerInteractGrowNum=[];
				var customerInteractNum=[];
				var customerGrowNum=[];
				var customerNum=[];
				var customerLevel1=[];
				var customerLevel2=[];
				var customerLevel3=[];
				var customerRisk1=[];
				var customerRisk2=[];
				var customerRisk3=[];
				for(var i=0;i<rows.length;i++){
					reportDate[i]=rows[i].reportDate;
					saleVolume[i]=rows[i].saleVolume;
					customerInteractGrowNum[i]=rows[i].customerInteractGrowNum;
					customerInteractNum[i]=rows[i].customerInteractNum;
					customerGrowNum[i]=rows[i].customerGrowNum;
					customerNum[i]=rows[i].customerNum;
					customerLevel1[i]=rows[i].customerLevel1;
					customerLevel2[i]=rows[i].customerLevel2;
					customerLevel3[i]=rows[i].customerLevel3;
					customerRisk1[i]=rows[i].customerRisk1;
					customerRisk2[i]=rows[i].customerRisk2;
					customerRisk3[i]=rows[i].customerRisk3;
				}
				
				var series=[{
					type:'area',
					name: '销量(份数)',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(2017, 2, 23),
					data: saleVolume
				},{
					type:'area',
					name: '每日客户拜访',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(2017, 2, 23),
					data: customerInteractGrowNum,
					visible: false
				},{
					type:'area',
					name: '客户拜访总量',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(2017, 2, 23),
					data: customerInteractNum,
					visible: false
				},{
					type:'area',
					name: '新增客户',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(2017, 2, 23),
					data: customerGrowNum,
					visible: false
				},{
					type:'area',
					name: '客户总量',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(2017, 2, 23),
					data: customerNum,
					visible: false
				},{
					type:'area',
					name: '潜在客户',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(2017, 2, 23),
					data: customerLevel1,
					visible: false
				},{
					type:'area',
					name: '普通客户',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(2017, 2, 23),
					data: customerLevel2,
					visible: false
				},{
					type:'area',
					name: '重点客户',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(2017, 2, 23),
					data: customerLevel3,
					visible: false
				},{
					type:'area',
					name: '保守客户',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(2017, 2, 23),
					data: customerRisk1,
					visible: false
				},{
					type:'area',
					name: '成长客户',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(2017, 2, 23),
					data: customerRisk2,
					visible: false
				},{
					type:'area',
					name: '进取客户',
					pointInterval: 24 * 3600 * 1000,
					pointStart: Date.UTC(2017, 2, 23),
					data: customerRisk3,
					visible: false
				}];
				lineTable(series);
			}
		}
	});
});

function customerLevel(container,title,data){
	$('#'+container).highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: title
        },
        tooltip: {
    	    pointFormat: '<b>{series.name}:{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}:{point.percentage:.1f} %</b>'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '百分比',
            data: data
        }]
    });
}

function lineTable(series){
	$('#container3').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: ' '
        },
        xAxis: {
            type: 'datetime',
            minRange: 14 * 24 * 3600000, // fourteen days
            // x 轴日期格式化
            labels: {
                formatter :function() {
                    return Highcharts.dateFormat('%Y-%m-%d', this.value);
                }
            }
        },
        yAxis: {
            title: {
                text: ' '
            },
        },
        // 数据提示框日期格式化的方法：
        tooltip: {
            // 1、通过 dateTimeLabelFormats 
            dateTimeLabelFormats: {
                //day: '%Y-%m-%d'
            },
            // 2、通过 xDateFormat
            //xDateFormat: '%Y-%m-%d',
            // 3、通过 formatter 函数
            formatter: function() {
                return '<b>' + Highcharts.dateFormat('%Y-%m-%d', this.key) + '</b><br>' + this.series.name + ' : ' +this.y;
            }
            // 第 1、2 中方式比较简单，也比较直观，配置方便
        },	
        legend: {
            enabled: true
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
        series: series
    });
}
</script>
	
</body>
</html>